<template>
  <div class="editForm">
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="90">
      <Row :gutter="32" type="flex">
        <Col span="12">
          <!-- 用户账号 -->
          <Form-item prop="userId" :label="$t('module.userManage.userAccount')">
            <Input
              v-model="modelForm.userId"
              :placeholder="$t('module.userManage.placeholder.account')"
              
              :maxlength="50"
              style="-width: 250px;"
            />
          </Form-item>
        </Col>
        <Col span="12">
          <!-- 用户名称 必填-->
          <Form-item prop="userName" :label="$t('module.userManage.name')">
            <Input
              v-model="modelForm.userName"
              :placeholder="$t('module.userManage.placeholder.userName')"
              
              style="-width: 250px;"
            />
          </Form-item>
        </Col>
                <Col span="12">
          <!-- 手机号码 必填-->
          <Form-item prop="mobile" :label="$t('module.userManage.cellPhoneNumber')">
            <Input
              v-model="modelForm.mobile"
              :placeholder="$t('module.userManage.placeholder.phoneNumber')"
              
            />
          </Form-item>
        </Col>
        <Col span="12">
          <!-- 电子邮箱 -->
          <Form-item prop="email" :label="$t('module.userManage.email')">
            <Input
              v-model="modelForm.email"
              :placeholder="$t('module.userManage.placeholder.email')"
              
              :maxlength="80"
            />
          </Form-item>
        </Col>
        <Col span="12">
          <Form-item prop="category" :label="$t('module.userManage.userRoles')">
            <Select v-model="modelForm.roleCode"  disabled>
              <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <!-- <Row :gutter="32" class="code-row-bg">
        <Col span="12">
          <Form-item prop="mobile" :label="$t('module.userManage.cellPhoneNumber')">
            <Input
              v-model="modelForm.mobile"
              :placeholder="$t('module.userManage.placeholder.phoneNumber')"
              
            />
          </Form-item>
        </Col>
        <Col span="12">
          <Form-item prop="email" :label="$t('module.userManage.email')">
            <Input
              v-model="modelForm.email"
              :placeholder="$t('module.userManage.placeholder.email')"
              
              :maxlength="80"
            />
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12">
          <Form-item prop="category" :label="$t('module.userManage.userRoles')">
            <Select v-model="modelForm.roleCode"  disabled>
              <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row> -->
    </Form>
  </div>
</template>

<script>
import locales from "./locales.js";
import tenantAPI from "@/api/tenantApi.js";
import userManageAPI from "@/api/userManageApi";
import { CoreModuleName } from "@/const";
import { getRoleByRoleCode } from "@/api/teantManageAPI.js";
import { validateMobile } from "@/tools/util.js"
export default {
  components: {},
  props: {
    tenantCode: {
      type: String,
      required: true
    }
  },
  mixins: [locales],
  data() {
    return {
      modelForm: {
        id: "",
        userId: "",
        userName: "",
        email: "",
        mobile: "",
        tenantCode: this.tenantCode,
        category: 2,
        roleCode: "admin-tenant"
      },
      categoryList: [
        {
          value: 1,
          label: this.$t("module.userManage.platformAdmin") //平台管理员
        },
        {
          value: 2,
          label: this.$t("module.userManage.tenantAdmin") // 租户管理员
        },
        {
          value: 3,
          label: this.$t("module.userManage.ordinaryUser") // 普通用户
        }
      ],
      roleList: [],
      rule: {
        userId: [
          {
            required: false,
            type: 'string',
            max: 30,
            message: this.$t("common.warning.lengMaxFormat", ['30'])
          }, 
          {
            type: 'string',
            pattern: /^[a-zA-Z0-9|_|\-|\.]+$/,
            message: this.$t("common.warning.codeFormat")
          }
          // {
          //   required: false,
          //   trigger: "blur",
          //   validator: (rule, value, callback) => {
          //     let reg = /^[0-9a-zA-Z_]{1,}$/gi;
          //     if (value === undefined || value.trim() === "") {
          //       callback();
          //     } else if (!reg.test(value.trim())) {
          //       callback(this.$t("module.tenantManage.warning.userAccount"));
          //     } else {
          //       callback();
          //     }
          //   }
          // }
        ],
        userName: [
          {
            required: true,
            message: this.$t("module.userManage.warning.enterUserName"),
            trigger: "blur"
          },
          {
            type: 'string',
            max: 50,
            message: this.$t("common.warning.lengMaxFormat", ['50'])
          },
          {
            type: 'string',
            pattern: /[\u4E00-\u9FA5]|[A-Z]|[a-z]|[0-9]/,
            message: this.$t("common.warning.nameFormat")
          }
        ],
        email: [
          {
            required: false,
            message: this.$t("module.userManage.warning.enterEmail"),
            trigger: "blur"
          },
          { type: "email", message: this.$t("module.userManage.warning.enterErrorEmail"), trigger: "blur" }
        ],
        mobile: [
          {
            required: true,
            message: this.$t("module.userManage.warning.enterCellPhoneNumber"),
            trigger: "blur"
          },
          // {
          //   type: "number",
          //   validator: (rule, value, callback) => {
          //     let reg = /^[1][3,4,5,6,7,8,9]\d{9}$/gi;
          //     if (!reg.test(value)) {
          //       callback(this.$t("module.userManage.warning.enterCorrectTel"));
          //     } else {
          //       callback();
          //     }
          //   },
          //   trigger: "blur"
          // }
          {
            type: "number",
            validator: validateMobile.bind(this),
            trigger: "blur"
          }
        ],
        category: [
          {
            type: "number",
            required: true,
            message: this.$t("module.userManage.warning.selectUserCategory"),
            trigger: "change"
          }
        ],
        tenantCode: [
          {
            required: true,
            message: this.$t("module.userManage.warning.selectTenantCode"),
            trigger: "change"
          }
        ],
        orgName: [
          {
            required: true,
            message: this.$t("module.userManage.selectOrganization"),
            trigger: "change"
          }
        ]
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          // theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]
    };
  },
  computed: {},
  created: function () {
    this.init();
    this.$emit("SetTitle", this.$t("module.tenantManage.addAdministrator"));
    this.$emit("SetPageWidth", 734);
    this.$emit("SetPageMinHeight", 200);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    init() {
      // 获取角色
      getRoleByRoleCode(this.modelForm.roleCode).then(({ roleCode, roleName }) => {
        if (roleCode) {
          this.roleList.push({
            value: roleCode,
            label: roleName
          });
        }
      });
    },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.actions[0].loading = true;
          userManageAPI
            .addUser(this.modelForm)
            .then(response => {
              this.$message.success({
                content: this.$t("common.addSuccess"),
                duration: 3
              });
              this.actions[0].loading = false;
              this.$emit("Close", true);
            })
            .catch(() => {
              this.actions[0].loading = false;
            });
        }
      });
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less"></style>
